<template>
    <NavBar :isNeedBack="false" :custom="true">
        <template #title>
            <text class="fz-16 text-default">菜谱</text>
        </template>
    </NavBar>
    <view
        class="content w-full box-border overflow-y-scroll box-border text-default"
        :style="{'height': `calc(100vh - ${navHeight + 18}px)`}"
    >
        <!-- 今日已点 -->
        <view class="w-full fz-14 text-600 pl-20 box-border">今日已点</view>
        <template v-if="nowMenuList.length">
            <scroll-view scroll-x="true" class="scroll-tab white-space-nowrap">
                <view class="my-20 mr-16 p-6 pb-8 box-border now-menu text-default rounded-8 bg-white" v-for="item in nowMenuList" :key="item.id">
                    <image class="now-menu-img rounded-8" :src="item.imgUrl"/><br/>
                    <view class="fz-14 mt-2 pl-4">{{ item.dishName }}</view>
                    <view class="fz-10 mt-4 pl-4">点菜人：<text class="text-primary">{{ item.orderPersonName }}</text></view>
                </view>
            </scroll-view>
        </template>
        <template v-else>
            <view class="now-menu-none">
                <u-empty text="今日暂未点菜哦~" icon="http://cdn.uviewui.com/uview/empty/data.png"/>
            </view>
        </template>
        <!-- 菜品分类 -->
        <view class="w-full fz-14 text-600 pl-20 box-border mt-16">菜品分类</view>
        <view class="flex-justifyBetween-box flex-wrap px-20">
            <view
                class="box-border menu-class text-default rounded-8 bg-white mt-20 flex-justifyBetween-itemsCenter-box px-20 py-14"
                v-for="item in menuClass"
                :key="item.dishType"
                @click="toPage(item)"
            >
                <view :class="['svg-icon', item.iconName]"/>
                <view class="flex-col-box flex-1 ml-14">
                    <view class="fz-14 text-600 text-default">{{ item.menuClassName }}</view>
                    <view class="fz-10 mt-2 text-grey">{{ item.desc }}</view>
                </view>
            </view>
        </view>
    </view>
    <TabBar :activeId="2"/>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { cdnPath } from '@/api/request'
import TabBar from '@/components/TabBar'
import NavBar from '@/components/NavBar'

// 导航条高度
const navHeight = uni.getStorageSync('navHeight')

// 今日已点菜单
interface NowMenuList {
    /** @description id */
    id: number
    /** @description 菜品图片 */
    imgUrl: string
    /** @description 菜品名称 */
    dishName: string
    /** @description 点菜人名称 */
    orderPersonName: string
    /** @description 点菜人 id */
    orderPersonId: number
}

// 今日已点菜单
const nowMenuList = reactive<NowMenuList[]>([
	// { id: 1, imgUrl: `${cdnPath}/01.jpg`, dishName: '泡椒牛蛙', name: '张三' },
	// { id: 2, imgUrl: `${cdnPath}/02.jpg`, dishName: '清炒菜心', name: '王二狗'  },
	// { id: 3, imgUrl: `${cdnPath}/03.jpg`, dishName: '香辣虾仁', name: '李四'  },
	// { id: 4, imgUrl: `${cdnPath}/04.jpg`, dishName: '凉拌鸡腿肉', name: '陈五'  },
	// { id: 5, imgUrl: `${cdnPath}/05.jpg`, dishName: '蒜蓉生蚝', name: '张三'  }
])

// 菜谱分类
interface MenuClass {
    /** @description 菜品类型 */
    dishType: number
    /** @description 名称 */
    menuClassName: string
    /** @description 图标 */
    iconName: string
    /** @description 描述 */
    desc: string
}

// 菜谱分类
const menuClass = reactive<MenuClass[]>([
	{ dishType: 1, menuClassName: '荤菜', iconName: 'svg-icon-shengxian-roulei', desc: '鸡鸭鱼肉虾' },
	{ dishType: 2, menuClassName: '素菜', iconName: 'svg-icon-shengxian-shucai',  desc: '清炒、炝炒' },
	{ dishType: 3, menuClassName: '凉拌菜', iconName: 'svg-icon-caipin-', desc: '荤素搭配' },
	{ dishType: 4, menuClassName: '汤菜', iconName: 'svg-icon-tubiaozhizuomoban', desc: '家常汤、炖汤' },
	{ dishType: 5, menuClassName: '大菜', iconName: 'svg-icon-Soup', desc: '干锅、水煮...' },
	{ dishType: 6, menuClassName: '其他', iconName: 'svg-icon-qitafuwu', desc: '烤鸭、卤菜...' }
])

const toPage = ({ dishType }) => {
	uni.navigateTo({
		url: `/pages/menuList/index?dishType=${dishType}`
	})
}
</script>

<style lang="less" scoped>
.now-menu {
    display: inline-block;
    width: 120px;
    box-shadow: rgba(149, 157, 165, 0.3) 0 8px 16px;

    .now-menu-img{
        width: 108px;
        height: 112px;
    }

    &:first-child {
        margin-left: 16px;
    }
}

.menu-class{
    width: calc(50% - 10px);
    box-shadow: rgba(149, 157, 165, 0.3) 0 8px 16px;

    .svg-icon {
        width: 30px;
        height: 30px;
    }
}
</style>
